<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>键盘焦点和鼠标悬停效果设计</title>
</head>
<body>
    <body class="g" background="./背景图-.jpg ">
    <h1>键盘焦点和鼠标悬停效果设计</h1>
    <div class="zo">
        <h2>1.款键盘焦点效果</h2>
        <form action="" method="get">
            <p>账号：<input class="a" type="text" name="fname"></p>
            <input class="a" type="submit" value="确定" />
            <p>账号：<input class="b" type="text" name="fname"></p>
            <input class="b" type="submit" value="确定" />       
            <p>账号：<input class="c" type="text" name="fname"></p>
            <input class="c" type="reset" value="清除" />
            <input class="c" type="submit" value="确定" />
            <p>账号：<input class="d" type="text" name="fname"></p>
            <input class="d" type="reset" value="清除" />
            <input class="d" type="submit" value="确定" />
    </form>
    </div>
    <h2>2.鼠标悬停效果</h2>
    <div class="mi"></div><br>
    <div class="tin"></div><br>
    <div class="chen"></div><br>
    <div class="wei"></div><br>
    <div class="cheng"></div><br>
    <div class="hao"></div><br>
<style>
    div{
        margin:auto;/*居中*/ 
    } 
     h1{
        font-size:50px;
         font-family:STXingkai;
        font-weight: 200;
        font-style: normal;
        color: rgb(223, 67, 20);;
        text-align: center;
    }
    h2{
        text-align: center;
        font-family: KaiTi;
        font-size: 40px;
        color: rgb(102, 248, 17);
    }
    .zo{
        text-align: center;
        font-family: KaiTi;
        font-size: 18px;
    }
    body{
        background-attachment: fixed;/*背景不动*/ 
        background-repeat: no-repeat;/*背景不重复*/
        background-size: 100%;/*图片铺满整个背景*/
           }
    .a:focus{
        background-color: aqua;
        border: 1mm ridge rgb(198, 207, 25);
        outline: 0.5rem solid;
    }
    .b:focus{
        background-color: rgb(155, 236, 134);
        outline: dashed rgb(230, 88, 147);
        border: thick double #32a1ce;
    }
    .c:focus{
        background-color: rgb(236, 234, 87);
        outline:thick double #05f140;
        border: 0.5rem solid #693ce2;
    }
    .d:focus{
        background-color: rgb(252, 65, 75);
        outline: 0px ridge ;
        border-radius: 2rem;
        border: thick double #0ef099;
    }
    div.mi{
        width: 200px;
        height: 200px;
        background-color: yellow;
        margin-top: 10px;
        transition: box-shadow 0.5s;
    }
    div.mi:hover{
        box-shadow: 5px 5px 5px #a5a3a3,5px -5px 5px #a5a3a3,-5px 5px 5px #a5a3a3,-5px -5px 5px #a5a3a3 ;
    }
    div.tin{
        width: 200px;
        height: 200px;
        background-color: rgb(37, 201, 78);
        margin-top: 10px;
        transition:  0.5s;
    }
    div.tin:hover{
        border: 1px red solid;
        opacity: 40px;
        opacity:1;/*透明度*/
    }
    div.chen{
        border: 1px red;
        width: 200px;
        height: 200px;
        background-image:linear-gradient(180deg,aqua,green)
    }
    div.chen:hover{
        box-shadow: 3px 3px red, -1em 0 0.4em olive;
    }
    div.wei{
        width: 200px;
        height: 200px;
        transition:width 2s;
        box-shadow: inset 1em 1em gold;
        background-image:linear-gradient(54deg,red,orange,yellow,green,blue 50%)
  
    }
  div.wei:hover{
       box-shadow: 10px 5px 5px red;
       width: 300px;    
  }
  div.cheng{
        width: 200px;
        height: 200px;
        transition: height 3s;
        background-image:linear-gradient(90deg,yellow,orange,25%,purple)
  }
  div.cheng:hover{
    border: 10px red solid ;
    height: 300px; 
    background-image:linear-gradient(54deg,rgb(11, 148, 11),rgb(182, 132, 40),rgb(106, 212, 18),rgb(156, 211, 27),rgb(221, 218, 11) 50%) 
  }
  div.hao{
    width: 200px;
    height: 200px;
    border: 5px red solid ;
    transition: height 3s;
    transition:width 2s;
    background-image:radial-gradient(circle,yellow,green)
  }
  div.hao:hover{
    height: 300px; 
    width: 400px;
    border: 10px rgb(16, 128, 5) solid ;
    box-shadow: 10px 10px 10px #e76529,10px -10px 10px #becf21,-10px 10px 10px #1feb2a,-10px -10px 10px #1cb7d3 ;
    background-image:radial-gradient(circle,rgb(235, 76, 76),rgb(54, 12, 243))
   
  }
</style>
</body>
</html>